<template>
  <div class="buttonTable65">
    <el-dialog @opened="$store.commit('dialogTop')"  :close-on-click-modal="false"  title="行程详情" :visible.sync="dialogFormVisibleAdd"  >
      <div style="width: 95%;margin: 0 auto;">
        <el-row style="line-height: 25px;" >
          <el-col :span="8"><span>订单号：<span style="color: grey;">{{detailInfo.orderNo}}</span></span></el-col>
          <el-col :span="8"><span>车辆编号：<span style="color: grey;">{{detailInfo.bicycleNo}}</span></span></el-col>
          <el-col :span="8"><span>骑行用户：<span style="color: grey;">{{detailInfo.userId}}</span></span></el-col>
          <el-col :span="8"><span>车辆企业：<span style="color: grey;">{{detailInfo.enterpriseName}}</span></span></el-col>
          <el-col :span="8"><span>还车时间：<span style="color: grey;">{{detailInfo.endTime}}</span></span></el-col>
          <el-col :span="8"><span>下单时间：<span style="color: grey;">{{detailInfo.startTime}}</span></span></el-col>
          <el-col :span="8"><span>骑行里程：<span style="color: grey;">{{detailInfo.orderMile}} 米</span></span></el-col>
          <el-col :span="8"><span>上传时间：<span style="color: grey;">{{detailInfo.uploadTime}}</span></span></el-col>
        </el-row>
      </div>
        <div style="margin-top: 20px;">
          <mapDetail ref="mapDetail" :gpsInfo="gpsInfo" ></mapDetail>
        </div>
      <div class="subTable" style="margin-top: 20px;text-align: center;">
      <el-button type="primary" @click="dialogFormVisibleAdd = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import mapDetail from "./map.vue"
  export default {
    props:[],
    data () {
      return {
        gpsInfo:[{lng:114.0661345267,lat:22.5485544122},{lng:114.0864293895,lat:22.5462370638},{lng:114.0680060312,lat:22.5402932772}],
        rows:"",
        count:"",
        detailInfo:{
          orderNo:"",
          isSuccess:"",
          curLabel:"",
          borrowSiteName:"",
          borrowRackNo:"",
          repaySiteAddress:"",
          repayRackNo:"",
        },
        rowsData:[],
        tableHeight1:400,
        multipleSelection: [],
        checked:[],
        roleChecked:"",
        dialogFormVisibleAdd: false,
      }
    },
    components:{
      mapDetail
    },
    mounted(){

    },
    methods: {
      dialigOpen(data){
        let gpsInfo=data.track?JSON.parse(data.track):[]
        gpsInfo.unshift({
          lng:data.startLng,
          lat:data.startLat,
        })
        gpsInfo.push({
          lng:data.endLng,
          lat:data.endLat,
        })
        this.gpsInfo=gpsInfo

        this.detailInfo=data
        this.dialogFormVisibleAdd = true
        setTimeout(()=>{
          this.$refs.mapDetail.getMap()
        })
      },
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" >
  .buttonTable65
    display inline-block
    margin-right 8px
    .el-dialog
      width 800px !important
      .el-dialog__body
        padding 20px


</style>
